<template>
  <a-modal
    :title="dialogTile"
    :width="1000"
    :confirm-loading="confirmloading"
    :mask-closable="false"
    :destroy-on-close="true"
    v-model="dialogVisible"
    @ok="confirmBtn"
    @cancel="handleCancel"
  >
    <a-form-model layout="inline" :model="queryParam">
      <a-form-model-item ref="userid" label="用户ID" prop="userid">
        <a-input v-model="queryParam.userid" placeholder="请输入用户ID" allow-clear />
      </a-form-model-item>
      <a-form-model-item ref="name" label="用户昵称" prop="name">
        <a-input v-model="queryParam.name" placeholder="请输入用户昵称" allow-clear />
      </a-form-model-item>
      <a-form-model-item ref="phone" label="手机号" prop="phone">
        <a-input v-model="queryParam.phone" placeholder="请输入手机号" allow-clear />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="searchData"> 查询 </a-button>
      </a-form-model-item>
    </a-form-model>
    <a-card :bordered="false">
      <a-table
        style="width: 100%; overflow-x: auto"
        v-if="columns.length"
        ref="tableList"
        :columns="columns"
        :data-source="dataSource"
        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          current: this.pageNo,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
        :loading="loading"
      >
        <template slot="baseinfo" slot-scope="text, record">
          <img style="width: 45px; heigth: 45px; border-radius: 5px; margin-right: 10px" :src="record.avatar_url" />
          <Ellipsis :length="20" tooltip>{{ record.nickname }} </Ellipsis>
        </template>
        <template slot="saas_clerk" slot-scope="text">
          <a-tag v-if="text == '0'">否</a-tag>
          <a-tag color="blue" v-else>是</a-tag>
        </template>
        <template slot="platform" slot-scope="text">
          <Ellipsis v-show="text == '0'" :length="4" tooltip>微信</Ellipsis>
          <Ellipsis v-show="text == '1'" :length="4" tooltip>支付宝</Ellipsis>
          <Ellipsis v-show="text == '3'" :length="4" tooltip>手机</Ellipsis>
        </template>
        <template slot="time" slot-scope="text, record">
          <span>{{ record.created_at | timeFormat }}</span>
        </template>
        <template slot="make" slot-scope="text, record">
          <span>{{ record.created_at | timeFormat }}</span>
        </template>
      </a-table>
    </a-card>
  </a-modal>
</template>
    
    <script>
import { Ellipsis } from '@/components'
import { getUserList } from '@/api/user'
export default {
  name: 'pool-list-add-or-edit-user-list',
  components: {
    Ellipsis,
  },
  data() {
    return {
      dialogTile: '用户列表',
      dialogVisible: false,
      confirmloading: false,

      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '用户信息',
          dataIndex: 'nickname',
          scopedSlots: { customRender: 'baseinfo' },
          width: 200,
        },
        {
          title: '会员等级',
          dataIndex: 'l_name',
        },
        {
          title: '手机号',
          dataIndex: 'binding',
        },
        {
          title: '核销员',
          dataIndex: 'is_saas_clerk',
          scopedSlots: { customRender: 'saas_clerk' },
        },
        {
          title: '成交订单',
          dataIndex: 'orderCount',
          sorter: (a, b) => a.orderCount - b.orderCount,
        },
        {
          title: '成交金额',
          dataIndex: 'priceTotal',
          sorter: (a, b) => a.priceTotal - b.priceTotal,
        },
        {
          title: '积分',
          dataIndex: 'integral',
          sorter: (a, b) => a.integral - b.integral,
        },
        {
          title: '余额',
          dataIndex: 'money',
          sorter: (a, b) => a.money - b.money,
        },
        {
          title: '活跃值',
          dataIndex: 'active_num',
        },
        {
          title: '个人总和',
          dataIndex: 'self_fl_total',
        },
        {
          title: '个人待返',
          dataIndex: 'self_fl_df',
        },
        {
          title: '个人已返',
          dataIndex: 'self_fl_yf',
        },
        {
          title: '团队总和',
          dataIndex: 'team_fl_total',
          sorter: (a, b) => team_fl_total - team_fl_total,
        },
        {
          title: '团队立结',
          dataIndex: 'team_fl_now',
        },
        {
          title: '团队待返',
          dataIndex: 'team_fl_df',
        },
        {
          title: '团队已返',
          dataIndex: 'team_fl_yf',
        },
        {
          title: '备注',
          dataIndex: 'comments',
        },
        {
          title: '注册时间',
          dataIndex: 'created_at',
          sorter: (a, b) => a.created_at - b.created_at,
          scopedSlots: { customRender: 'time' },
        },
      ],

      queryParam: {
        userid: '',
        name: '',
        phone: '',
      },
      loading: false,
      dataSource: [],
      totalCount: 0,
      pageNo: 1,
      pageSize: 10,

      queryName: '',
      selectedRowKeys: [],
      canAction: true,
      user_ids: [],
    }
  },
  created() {},
  methods: {
    handleShow(name, user_ids, canAction) {
      this.pageNo = 1
      this.getList()
      this.canAction = canAction
      this.queryName = name
      if (user_ids) {
        this.user_ids = user_ids
        this.selectedRowKeys = user_ids //若已存在选中项 反显
      } else {
        this.user_ids = []
        this.selectedRowKeys = []
      }
      this.dialogVisible = true
    },
    handleCancel() {
      this.user_ids = []
      this.selectedRowKeys = []
      this.dialogVisible = false
    },
    searchData() {
      this.pageNo = 1
      this.getList()
    },
    // 商品列表
    async getList() {
      var newObj = {}
      newObj = { ...this.queryParam, pageNo: this.pageNo, pageSize: this.pageSize }
      this.loading = true
      const res = await getUserList(newObj)
      this.loading = false
      if (!res.code) {
        this.dataSource = res.data.data
        this.totalCount = res.data.totalCount
      }
    },
    tablePageChange(e) {
      this.pageNo = e
      this.getList()
    },
    paginationSizeChange(current, size) {
      this.pageNo = current
      this.pageSize = size
      this.getList()
    },
    onSelectChange(selectedRowKeys) {
      if (!this.canAction) {
        this.selectedRowKeys = this.user_ids
      } else {
        this.selectedRowKeys = selectedRowKeys //选中项
      }
    },
    // 提交选中项
    confirmBtn() {
      this.confirmloading = true
      this.$emit('getUserIds', this.queryName, this.selectedRowKeys) //选中项提交到父级页面
      setTimeout(() => {
        this.confirmloading = false
        this.selectedRowKeys = []
        this.dialogVisible = false
      }, 300)
    },
  },
}
</script>
  
  <style lang="less" scoped>
.table-operator {
  margin-top: 10px;
}
/deep/.ant-card-body {
  padding: 0 !important;
}
/deep/.ant-form-item-control-wrapper {
  min-width: 100px !important;
}
/deep/.ant-table-body {
  min-height: 360px;
}
.slotTable {
  /deep/.ant-table-row-cell-break-word {
    padding: 2px 8px !important;
  }
  /deep/.ant-table-body {
    min-height: 0px;
  }
}

/deep/.ant-table-body::-webkit-scrollbar {
  display: none; /*ChromeSafari*/
}

.of_el {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: Ellipsis;
}

.table_operator_icon {
  font-size: 18px;
  padding: 0 5px;
  color: rgb(182, 182, 182);
  cursor: pointer;
  &:hover {
    color: rgb(24, 144, 255);
  }
}

.goods-info {
  display: flex;
  align-items: flex-start;
  position: relative;
  .goods-pic {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
  }
  .info-box {
    margin-left: 24px;
    margin-right: 5px;
    .goods-name {
      // width: 185px;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      text-overflow: Ellipsis;
      overflow: hidden;
    }
  }
  .item-edit-box {
    width: 15px;
    height: 100%;
    position: absolute;
    right: -12px;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.goods-price-row {
  position: relative;
  display: inline-block;
  .row-price-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-rest-row {
  position: relative;
  display: inline-block;
  .row-rest-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-virtual-row {
  position: relative;
  display: inline-block;
  .row-virtual-edit {
    position: absolute;
    right: -27px;
    top: 0;
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.goods-type {
  min-width: 60px;
  display: inline-block;
}
.table-action {
  min-width: 93px;
  display: inline-block;
}

.flexBox {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  .inp {
    width: 426px;
    border-radius: 2px 0 0 2px;
  }

  .text {
    width: 42px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #d9d9d9;
    border-radius: 0 2px 2px 0;
    border-left: 0;
    background: #f7f7f7;
  }
}

.formFlex {
  display: flex;
  align-items: center;

  i {
    color: #ff0000;
    font-style: normal;
  }

  span {
    margin-right: 10px;
  }
}
</style>
  
    